<template>
    <div id="capture" v-show="onshowbg == 1">
        <div class="share_bg">
            <div class="share_user_info">
                <img class="user_img" :src="userinfo.header" crossOrigin="anonymous">
                <div class="user_info">
                    <div class="name">{{userinfo.nickname}}</div>
                    <div class="title">邀请你来抽盲盒啦</div>
                </div>
            </div>

            <div class="share_bg_title">
                <img src="https://img.528btc.com.cn/activity/box/share_jp.png">
            </div>

            <div class="jp">
                <img :src="oneprize.pic" >
                <div class="jp_num">{{oneprize.activityRewardTitle}}</div>
            </div>

            
        </div>
        <!-- <div class="bottom_con"></div> -->
        <div class="bottom">
            <div class="bottom_left">
                <img  class="logo" src="https://img.528btc.com.cn/activity/box/logo2.png" >
                <div class="logo_title">识别二维码下载APP抽数字盲盒</div>
            </div>
            <div class="bottom_right">
                <img :src="imgurl" crossOrigin="anonymous">
            </div>
        </div>
    </div>
</template>

<script>
import html2canvas from 'html2canvas';

import OSS from 'ali-oss'
export default {
name: 'share',
components: {
    
},
data() {
    return {
        // imgurl:'https://img.528btc.com.cn/activity/box/code.png',
        ossParams:'',
        client:'',
        loading:'',
        stsToken:''
    }
},
created(){
    
    
    
    // })
    // this.qccode()
},
props: {
    // 数据列表
    oneprize: {
        type: Object,
        default: {},
    },
    userinfo:{
        type: Object,
        default: {},
    },
    imgurl:{
        type: String,
        default: '',
    },
    onshowbg:{
        type: Number,
        default: 0,
    }
},
methods:{
    initsdk(stsToken){
        this.ossParams = {
            accessKeyId: 'LTAI5t8PJFD9AQxA8D4i7dHD',
            accessKeySecret: '7EQ8OoDntwNbcAwiHEGHvyFvVYVGkD'
        }
        this.client = new OSS({
            // region: this.ossParams.region,
            accessKeyId: this.ossParams.accessKeyId,
            accessKeySecret: this.ossParams.accessKeySecret,
            bucket: 'oss-bijie',
            endpoint: 'oss-cn-shenzhen.aliyuncs.com',
            stsToken:stsToken,
            refreshSTSToken: async () => {
                // 向您搭建的STS服务获取临时访问凭证。
                const {
                    data: res
                } = await getSts()
                return {
                    accessKeyId: this.ossParams.accessKeyId, // 自己账户的accessKeyId或临时秘钥
                    accessKeySecret: this.ossParams.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
                    stsToken: stsToken, //  从STS服务获取的安全令牌（SecurityToken）。
                }
            },
            // 刷新临时访问凭证的时间间隔，单位为毫秒。
            refreshSTSTokenInterval: 3600 * 1000
            // bucket: 'bijieoss',
            // endpoint: 'oss-cn-hongkong.aliyuncs.com'
            // endpoint: this.ossParams.endpoint
        })
    },
    //生成
    drawImage(){
        let options = {
            useCORS:true, // 使用跨域
            ignoreElements:false,
            scale:6, //dpi 设置默认值，提高图片分辨率
        };
        html2canvas(document.querySelector('#capture'),options).then(canvas=>{
            let url = canvas.toDataURL('image/png') // 将canvas转成base64图片格式
            this.imgurl = url
        })
    },
    // 保存海报
    saveFile(wx){
        this.loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        // let dpi = window.devicePixelRatio || 2
        let _this = this
        let options = {
            useCORS:true, // 使用跨域
            scale:6,
            ignoreElements:(ele) =>{ //忽略的dom元素，保存海报就不会显示这个元素内容
                if(ele.id === 'name'){
                        return true
                }
            }
        }
        html2canvas(document.querySelector('#capture'),options).then(canvas=>{
            // canvas.toBlob(function(blob){
            //     var url = window.URL.createObjectURL(blob)
            //     var filename = '海报.png'
            //     // a.href = url
            //     // a.download = filename
            //     // a.click()
            //     // console.log(a)
            //     // _this.putimg(blob)
            //     // 当图片文件加载完成释放这个url
            //     // window.URL.revokeObjectURL(url)
            // })
            let curTime = new Date();
            let year = curTime.getFullYear();
            let month = curTime.getMonth() + 1;
            let day = curTime.getDate();
            let hour = curTime.getHours(); //获取当前小时数(0-23)
            let minute = curTime.getMinutes(); //获取当前分钟数(0-59)
            let second = curTime.getSeconds(); //获取当前秒数(0-59)
            let dir =  String(year) + (month < 10 ? '0' + month : month) + (day < 10 ? '0' + day : day) + hour + minute + second;
            canvas.toBlob(
            (blob) => {
                //oss上传Blob文件会报错，所以再将Blob文件转化回File形式在上传阿里oss
                let files = new File([blob], dir + 'hb'); //拿到的blod文件转化成文件
                setTimeout(() => {
                    _this.putimg(files,year,month,day,wx)
                }, 1000);
            },
            "image/png",
            ); 
        })
    },

    putimg (imgurl,year,month,day,wx) {
        let timefile = year + '-' + month + '-' + day
        // const path = require("path")
        const headers = {
        // 指定Object的访问权限。
        'Cache-Control': 'public, no-cache',
        // 通过文件URL访问文件时，指定以附件形式下载文件，下载后的文件名称定义为example.txt。
        'Content-Disposition': 'attachment; filename="'+ imgurl.name + '.png' + '"',
        };
        try {
            // 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
            // 如果本地文件的完整路径中未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
            const result = this.client.put('dev/'+ timefile + '/' + imgurl.name + '.png', imgurl
            // 自定义headers
            ,{headers}
            );
            let a = result.then((res)=>{
                var data
                if(wx == 1){
                    data = {
                        type:2,
                        channel:1,
                        text:res.url
                    }
                }else if(wx == 2){
                    data = {
                        type:2,
                        channel:2,
                        text:res.url
                    }
                }else{
                    data = {
                        type:2,
                        channel:3,
                        text:res.url
                    }
                }
                this.$dsbridge.callmethod('share',JSON.stringify(data),res => {
                    this.loading.close();
                    if(wx == 0){
                        this.$message({
                            showClose: true,
                            message: '保存成功',
                            type: 'success'
                        });
                    }
                    this.$parent.onestatusclose(1)
                    // this.$emit('onestatusclose',1)
                })
            })
        } catch (e) {
            console.log(e);
        }
    }

    
    
}
}
</script>
<style lang="scss">
#app{
	background: #fff;
}
</style>
<style scoped lang="scss">

#capture{
    // position:absolute;
    // right:-62.5rem;
    // top:0;
}
.share_bg{
    width: 62.5rem;
    height: 83.33rem;
    background:#3D3E41 url(https://img.528btc.com.cn/activity/box/share_bg.png) no-repeat;
    background-size: cover;
    padding: 3.33rem 2.67rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .share_user_info{
        display: flex;
        align-items: center;
        .user_img{
            width: 8rem;
            height: 8rem;
            border-radius: 50%;
        }
        .user_info{
            margin-left: 1.33rem;
            display: flex;
            flex-direction: column;
            .name{
                font-size: 2.67rem;
                font-weight: 600;
                color: #F7D049;
            }
            .title{
                font-size: 2.67rem;
                color: #FFFFFF;
                margin-top: 0.67rem;
            }
        }
    }
    .share_bg_title{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 11rem;
        img{
            width: 28.67rem;
            height: 4.33rem;
        }
    }

    .jp{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 4.67rem;
        flex-direction: column;
        img{
            width: 33.33rem;
            height: 33.33rem;
        }
        .jp_num{
            font-size: 4rem;
            font-weight: 600;
            color: #F7D049;
            margin-top: 2rem;
        }
    }

}
// .bottom_con{
//     width: 100%;
//     height: 11rem;
//     background: #3D3E41;
// }
.bottom{
    width: 100%;
    height: 16.67rem;
    background: #F7D049;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 3rem;
    box-sizing: border-box;
    .bottom_left{
        display: flex;
        flex-direction: column;
        .logo{
            width: 16.08rem;
            height:5.33rem ;
        }
        .logo_title{
            font-size: 2.33rem;
            font-weight: 400;
            color: #000000;
        }
    }
    .bottom_right{
        width: 12.67rem;
        height: 12.67rem;
        img{
            width: 12.67rem;
            height: 12.67rem;
        }
    }
}
</style>
